<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="d3.js"></script>
  <script src="shapes.js"></script>
</head>
<body>

  <div>
    <svg id="things" width="600" height="300" style="background:white">
      <g id="generator" />
      <g id="component" />
      <g id="layout" />
      <g id="data" />
    </svg>
  </div>
  
  <div>
   <svg id="predefined" width="600" height="260" style="background: lightgrey"/>
  </div>

  <div>
    <svg id="symbols" width="600" height="120" style="background: lightgrey"/>
  </div>

  <div>
    <svg id="usedefs" width="600" height="100" style="background: lightgrey">
      <defs>                                               <!--1-->
	<g id="crosshair">                                 <!--2-->
	  <circle cx="0" cy="0" r="2" fill="none"/>        <!--3-->
	  <line x1="-3" y1="0" x2="-1" y2="0" />                    
	  <line x1="1" y1="0" x2="3" y2="0" />
	  <line x1="0" y1="-1" x2="0" y2="-3" />
	  <line x1="0" y1="1" x2="0" y2="3" />
	</g>                                                        
      </defs>
    </svg>    
  </div>

  <div>
    <svg id="usedefs2" width="600" height="100" style="background: lightgrey">
      <g stroke="black">
        <g transform="translate(180,50) scale(2)" stroke-width="0.5">
	  <circle cx="0" cy="0" r="2" fill="none"/>     
	  <line x1="-3" y1="0" x2="-1" y2="0" />                    
	  <line x1="1" y1="0" x2="3" y2="0" />
	  <line x1="0" y1="-1" x2="0" y2="-3" />
	  <line x1="0" y1="1" x2="0" y2="3" />
	</g>                                                        

        <g transform="translate(260,50) scale(6)" stroke-width="0.289">	
	  <circle cx="0" cy="0" r="2" fill="none"/>     
	  <line x1="-3" y1="0" x2="-1" y2="0" />                    
	  <line x1="1" y1="0" x2="3" y2="0" />
	  <line x1="0" y1="-1" x2="0" y2="-3" />
	  <line x1="0" y1="1" x2="0" y2="3" />
	</g>

        <g transform="translate(340,50) scale(4)" stroke-width="0.354">	
	  <circle cx="0" cy="0" r="2" fill="none"/>     
	  <line x1="-3" y1="0" x2="-1" y2="0" />                    
	  <line x1="1" y1="0" x2="3" y2="0" />
	  <line x1="0" y1="-1" x2="0" y2="-3" />
	  <line x1="0" y1="1" x2="0" y2="3" />
	</g>

        <g transform="translate(420,50) scale(8)" stroke-width="0.25">	
	  <circle cx="0" cy="0" r="2" fill="none"/>     
	  <line x1="-3" y1="0" x2="-1" y2="0" />                    
	  <line x1="1" y1="0" x2="3" y2="0" />
	  <line x1="0" y1="-1" x2="0" y2="-3" />
	  <line x1="0" y1="1" x2="0" y2="3" />
	</g>
      </g>
    </svg>    
  </div>
  
  <div>
    <svg id="surprise" width="610" height="260" style="background:white">
      <g transform="translate(250,50)" font-family="sans-serif" font-size="14">
	
        <circle cx="0" cy="0" r="4" stroke="black" />

        <rect x="0" y="0" width="20" height="50" stroke="black" fill="none" />
        <rect x="0" y="0" width="20" height="50" stroke="blue" fill="none"
              transform="scale(2)" />
        <line x1="20" y1="50" x2="40" y2="100" stroke="black"
            stroke-dasharray="2,2" />
<!--    <rect x="0" y="0" width="40" height="100" /> -->

        <rect x="100" y="20" width="20" height="50" stroke="green" fill="none"/>
        <rect x="100" y="20" width="20" height="50" stroke="red" fill="none"
              transform="scale(2)" />
        <line x1="100" y1="20" x2="200" y2="40" stroke="black"
              stroke-dasharray="2,2" />
        <line x1="120" y1="70" x2="240" y2="140" stroke="black"
              stroke-dasharray="2,2" />
<!--    <rect x="200" y="40" width="40" height="100" /> -->

        <text x="0" y="-10" text-anchor="middle">(0,0)</text>
      </g>

      <g transform="translate(20,50)" font-family="monospace" font-size="14">
        <text x="0" y="15" text-anchor="start">&lt;rect x="0" y="0"</text>
        <text x="0" y="32">
	  <tspan visibility="hidden">X</tspan><tspan>width="20" height="50" /&gt;<tspan> 
	</text>

        <text x="30" y="115" text-anchor="start" fill="blue">
          &lt;rect x="0" y="0"</text>
        <text x="30" y="132" text-anchor="start" fill="blue">
	  <tspan visibility="hidden">X</tspan><tspan>width="40" height="100" /&gt;</tspan>
        </text>	
      </g>

      <g transform="translate(350,50)" font-family="monospace" font-size="14">
        <text x="0" y="-10" text-anchor="start" fill="green">
          &lt;rect x="100" y="20"</text>
	<text x="0" y="7" text-anchor="start" fill="green">
	  <tspan visibility="hidden">X</tspan><tspan>width="20" height="50" /&gt;</tspan>
        </text>
      </g>

      <g transform="translate(375,200)" font-family="monospace" font-size="14">
        <text x="0" y="15" text-anchor="start" fill="red">
	  &lt;rect x="200" y="40"</text>
	<text x="0" y="32" fill="red">
          <tspan visibility="hidden">X</tspan><tspan>width="40" height="100" /&gt;</tspan>
        </text>	
      </g>

      <path fill="none" stroke="black" d="M525,70 Q600,135 550,200" />
      <path fill="none" stroke="black" transform="rotate(33,550,200)"
	    d="M550,200 l5,-10 M550,200 l-5,-10" />
      <rect x="505" y="105" width="90" height="50" fill="white" />
      <text x="505" y="125" font-family="monospace" font-size="14">
	transform=</text>
      <text x="505" y="142" font-family="monospace" font-size="14">
	"scale(2)"</text>


      <text x="40" y="125" font-family="monospace" font-size="14">
	transform="scale(2)"</text>
      <path fill="none" stroke="black" d="M50,90 Q0,120 40,150" />
      <path fill="none" stroke="black" transform="rotate(-50,40,150)"
	    d="M40,150 l5,-10 M40,150 l-5,-10" />
    </svg>
  </div>

  <div>
    <svg id="lines" width="300" height="200" style="background:lightgrey">
    </svg>
  </div>

  <div>
    <svg id="undef" width="300" height="200" style="background:lightgrey">
    </svg>
  </div>
  
  <div>
    <svg id="builtin" width="700" height="670" style="background: lightgrey"/>
  </div>

  <div>
    <svg id="pie" width="600" height="350" style="background: lightgrey"/>
  </div> 
  
  <div>
    <svg id="sticker" width="600" height="200" style="background: lightgrey"/>
  </div>
  
     
</body>
</html>
